﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表页</title>
    <meta name="keywords" content="blog"/>
    <meta name="description" content="blog"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/base.css" rel="stylesheet">
    <link href="/css/m.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script src="/js/comm.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <!--    <script src="/ele/index.js"></script>-->
    <script src="/js/modernizr.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<!--top begin-->
<div id="app">
    <header id="header">
        <div class="navbox">
            <h2 id="mnavh"><span class="navicon"></span></h2>
            <div class="logo"><a href="#">乐享平台</a></div>
            <nav>
                <ul id="starlist">
                    <li><a href="/toIndex">首页</a></li>
                    <li><a href="/list">文章</a></li>
                    <li class="menu"><a href="list2.html">资源共享</a>
                        <ul class="sub">
                            <li><a href="/6">文档</a></li>
                            <li><a href="/7">音乐</a></li>
                            <li><a href="/8">视频</a></li>
                            <li><a href="/7">软件</a></li>
                            <li><a href="/8">笔记</a></li>
                        </ul>
                        <span></span></li>
                    <li><a href="/about">个人中心</a></li>
                    <li><a href="/write"><i class="el-icon-edit-outline" style="color: white;font-size: 35px;padding-top: 10px;"></i></a></li>
                    <!--        <li><a href="daohang.html"></a></li>-->
                    <!--        <li><a href="about.html">关于我</a></li>-->
                </ul>
            </nav>
            <div class="searchico"></div>
        </div>
    </header>
    <div class="searchbox">
        <div class="search">
            <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
                <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词"
                       style="color: rgb(153, 153, 153);"
                       onFocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}"
                       onBlur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
                <input name="show" value="title" type="hidden">
                <input name="tempid" value="1" type="hidden">
                <input name="tbname" value="news" type="hidden">
                <input name="Submit" class="input_submit" value="搜索" type="submit">
            </form>
        </div>
        <div class="searchclose"></div>
    </div>
    <!--top end-->
    <article>
        <!--lbox begin-->
        <div class="lbox">
            <div class="whitebg lanmu"><img src="/images/lm01.jpg">
                <h1>文章</h1>
                <p>快来这里分享你的趣事吧，无论是日常还是学习都可以分享！让大家一起分享你的喜怒哀乐！</p>
            </div>
            <div class="whitebg bloglist">
                <h2 class="htitle">最新文章</h2>
                <template v-for="articleDTO in articleDTOs">
                    <div style="width: 780px;float: left;padding: 15px;border-radius: 4px;margin: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                        <li>
                            <h3 class="blogtitle"><a href="/" target="_blank">{{articleDTO.article.title}}</a></h3>
                            <span class="blogpic imgscale">
<!--                            <i>-->
<!--                                <a href="/">{{article.columnname}}</a>-->
<!--                            </i>-->
                            <a href="/" title=""><img :src="articleDTO.article.image" alt=""></a>
                        </span>
                            <p class="blogtext">{{articleDTO.article.introduction}}</p>
                            <div style="margin-bottom: 5px;float: bottom;">
                                <p class="bloginfo" style="float: bottom"><i class="avatar"><img
                                        :src="articleDTO.user.avatar"></i>
                                    <span>{{articleDTO.user.username}}</span><span>{{articleDTO.article.updateTime}}</span>
                                    <span>【<a href="/">{{articleDTO.column.name}}</a>】</span>
                                </p>
                                <a  class="viewmore" :href="'/page/article.html?id=' + articleDTO.article.id">阅读更多</a>
                            </div>
                        </li>
                        <el-row>
                            <el-col :span="12">
                                <div class="grid-content bg-purple-light">
                                    <div style="text-align: center;height: 36px;width:80px;vertical-align: center;padding-left: 175px">
                                        <img src="/img/unlike.png" width="20px" height="20px"
                                             style="margin:0 auto;padding: 8px;vertical-align: middle;float: left">
                                        <span style="float:left;line-height: 36px">{{articleDTO.article.thumbup}}</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple-light">
                                    <div style="text-align: center;height: 36px;width:80px;vertical-align: center;padding-left: 175px">
                                        <img src="/img/comment.png" width="20px" height="20px"
                                             style="margin:0 auto;padding: 8px;vertical-align: middle;float: left">
                                        <span style="float:left;line-height: 36px">{{articleDTO.article.comment}}</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </template>
                <div class="pagelist"><a title="Total record">&nbsp;<b>67</b> </a>&nbsp;&nbsp;&nbsp;<b>1</b>&nbsp;<a
                        href="/download/index_2.html">2</a>&nbsp;<a href="/download/index_3.html">3</a>&nbsp;<a
                        href="/download/index_2.html">下一页</a>&nbsp;<a href="/download/index_3.html">尾页</a></div>
                <!--pagelist end-->
            </div>

            <!--bloglist end-->
        </div>
        <div class="rbox">
            <div class="whitebg paihang">
                <h2 class="htitle">点击排行</h2>
                <section class="topnews imgscale"><a href="/"><img
                        src="/images/h1.jpg"><span>6条网页设计配色原则,让你秒变配色高手</span></a></section>
                <ul>
                    <li><i></i><a href="/">十条设计原则教你学会如何设计网页布局!</a></li>
                    <li><i></i><a href="/">用js+css3来写一个手机栏目导航</a></li>
                    <li><i></i><a href="/">6条网页设计配色原则,让你秒变配色高手</a></li>
                    <li><i></i><a href="/">三步实现滚动条触动css动画效果</a></li>
                    <li><i></i><a href="/">个人博客，属于我的小世界！</a></li>
                    <li><i></i><a href="/">安静地做一个爱设计的女子</a></li>
                    <li><i></i><a href="/">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</a></li>
                    <li><i></i><a href="/">做个人博客如何用帝国cms美化留言增加头像选择</a></li>
                </ul>
            </div>
            <div class="whitebg tuijian">
                <h2 class="htitle">本栏推荐</h2>
                <section class="topnews imgscale"><a href="/"><img
                        src="/images/h2.jpg"><span>6条网页设计配色原则,让你秒变配色高手</span></a></section>
                <ul>
                    <li><a href="/"><i><img src="/images/text01.jpg"></i>
                        <p>十条设计原则教你学会如何设计网页布局!</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text02.jpg"></i>
                        <p>用js+css3来写一个手机栏目导航</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text03.jpg"></i>
                        <p>6条网页设计配色原则,让你秒变配色高手</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text04.jpg"></i>
                        <p>三步实现滚动条触动css动画效果</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text05.jpg"></i>
                        <p>个人博客，属于我的小世界！</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text06.jpg"></i>
                        <p>安静地做一个爱设计的女子</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text07.jpg"></i>
                        <p>个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</p>
                    </a></li>
                </ul>
            </div>
            <div class="ad whitebg imgscale">
                <ul>
                    <a href="/"><img src="/images/ad.jpg"></a>
                </ul>
            </div>
            <div class="whitebg cloud">
                <h2 class="htitle">标签云</h2>
                <ul>
                    <a href="" target="_blank">个人博客模板</a> <a href="" target="_blank">css动画</a> <a href=""
                                                                                                  target="_blank">布局</a>
                    <a
                            href="" target="_blank">今夕何夕</a> <a href="" target="_blank">SEO</a> <a href=""
                                                                                                   target="_blank">女程序员</a>
                    <a
                            href="" target="_blank">小世界</a> <a href="" target="_blank">个人博客</a> <a href=""
                                                                                                   target="_blank">网页设计</a>
                </ul>
            </div>
            <div class="whitebg wenzi">
                <h2 class="htitle">猜你喜欢</h2>
                <ul>
                    <li><a href="/">十条设计原则教你学会如何设计网页布局!</a></li>
                    <li><a href="/">用js+css3来写一个手机栏目导航</a></li>
                    <li><a href="/">6条网页设计配色原则,让你秒变配色高手</a></li>
                    <li><a href="/">三步实现滚动条触动css动画效果</a></li>
                    <li><a href="/">个人博客，属于我的小世界！</a></li>
                    <li><a href="/">安静地做一个爱设计的女子</a></li>
                    <li><a href="/">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</a></li>
                    <li><a href="/">做个人博客如何用帝国cms美化留言增加头像选择</a></li>
                </ul>
            </div>
            <div class="ad whitebg imgscale">
                <ul>
                    <a href="/"><img src="/images/ad02.jpg"></a>
                </ul>
            </div>
            <div class="whitebg tongji">
                <h2 class="htitle">站点信息</h2>
                <ul>
                    <li><b>建站时间</b>：2018-10-24</li>
                    <li><b>网站程序</b>：帝国cms</li>
                    <li><b>主题模板</b>：<a href="#" target="_blank">《今夕何夕》</a></li>
                    <li><b>文章统计</b>：299条</li>
                    <li><b>文章评论</b>：490条</li>
                    <li><b>统计数据</b>：<a href="/">百度统计</a></li>
                </ul>
            </div>
        </div>
    </article>
</div>
<footer>
    <div class="box">
        <div class="wxbox">
            <ul>
                <li><img src="/images/wxgzh.jpg"><span>微信公众号</span></li>
                <li><img src="/images/wx.png"><span>我的微信</span></li>
            </ul>
        </div>
        <div class="endnav">
            <p><b>站点声明：</b></p>
            <p>1、本站个人博客模板，均为杨青青本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>
            <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a
                    href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=HHh9cn95b3F1cHVye1xtbTJ-c3E"
                    target="_blank">dacesmiling@qq.com</a></p>
            <p>Copyright © <a href="#" target="_blank">www.yangqq.com</a> All Rights Reserved. 备案号：<a
                    href="http://www.bootstrapmb.com/" target="_blank">蜀ICP备11002373号-1</a></p>
        </div>
    </div>
    <a href="#">
        <div class="top"></div>
    </a>
</footer>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data() {
            return {
                articleDTOs: [0]
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get("/article").then(res => {
                    console.log(res.data);
                    this.articleDTOs = res.data.data;
                })
            },
            jumpToArticle(id){
                localStorage.setItem("ID", JSON.stringify(id));
                axios.get("/page/article");
            }
        }
    })

</script>

</body>
</html>
